import Taro, {Component} from '@tarojs/taro'
import {Text, View} from '@tarojs/components'

export default class Xhl6 extends Component {
  config = {
    navigationBarTitleText: '列表渲染'
  }

  render() {
    const numbers = [...Array(10).keys()] // [0, 1, 2, ..., 10]
    const listItems = numbers.map((number) => {
      return <Text key={String(number)} className='li'> 我是第 {number + 1} 个数字</Text>
    })
    const list = numbers
      .filter(number => number < 5)
      .map(number => {
        return <Text key={String(number)} className='li'> 我是第 {number + 1} 个数字</Text>
      })
    return (
      <View>
        <View>1. 使用 JavaScript 中的 map() 方法遍历数组，值封装在 Text 里</View>
        <View>2. 你会得到一个报错：提醒你当循环一个数组时应该提供 keys</View>
        <View>{listItems}</View>
        <View>给每个 Text 一个 Keys</View>
        <View>3. 元素的 key 在他的兄弟元素之间应该唯一</View>
        <View>4. 然而，它们不需要是全局唯一的。当我们生成两个不同的数组时，我们可以使用相同的 key</View>
        <View>5. 你不能把 map 函数生成的模板当做一个数组来处理</View>
        <View>6. 应该先处理需要循环的数组，再用处理好的数组来调用 map 函数</View>
        <View>{list}</View>
      </View>
    )
  }
}
